<template>
  <el-dialog
    :visible="previewStatus"
    @close="btnCancel"
    title="预览文章"
    width="800px"
  >
    <!-- 加载完成-文章详情 -->
    <div class="article-detail">
      <!-- 文章标题 -->
      <h2 class="article-title">{{ artData.title }}</h2>
      <!-- /文章标题 -->

      <!-- 用户信息 -->
      <div class="user-info" left :border="false">
        <span class="publish-date">
          {{ artData.createTime | parseTimeByString }}
        </span>
        <span class="user-name">{{ artData.username }}</span>
        <span class="el-icon-view">&emsp;{{ artData.visits }}</span>
      </div>
      <!-- /用户信息 -->

      <!-- 文章内容 -->
      <div
        class="article-content markdown-body"
        v-html="artData.articleBody"
        ref="article-content"
      ></div>
    </div>
    <!-- /加载完成-文章详情 -->
  </el-dialog>
</template>

<script>
export default {
  props: {
    previewStatus: {
      type: Boolean,
      default: false
    },
    artData: {
      type: Object,
      default: null,
      request: true
    }
  },
  methods: {
    btnCancel () {
      this.$emit('update:previewStatus', false)
      this.$emit('update:artData', null)
    }
  }
}
</script>

<style scoped lang='scss'>
@import url("./style/github-markdown.css");
.article-detail {
  color: #606266;
  font-size: 14px;
  word-break: break-all;
  .article-title {
    margin: 0;
  }

  .user-info {
    border-bottom: 1px dashed #ccc;
    padding-bottom: 10px;
    span {
      margin-left: 10px;
      margin-top: 10px;
    }
  }

  .article-content ::v-deep {
    background: #f5f5f5;
    padding: 10px;
    p {
      text-align: justify;
    }
  }
}
</style>
